<template>
	<div id="home" class="auto-height">
		<cardItem v-for="(item, index) in data" :obj="item"></cardItem>
		<pagination @change="getData" :value="pager"></pagination>
	</div>
</template>

<script>
import cardItem from '@/components/cardItem.vue';
import pagination from '@/components/pagination.vue';
export default {
	data() {
		return {
			data: [],
			pager: {}
		};
	},
	created() {
		this.getData(this.pathPage, 8);
	},
	components: {
		cardItem,
		pagination
	},
	methods: {
		getData(page, pageSize) {
			if (page == 1) {
				this.$router.replace({ query: {} });
			} else {
				this.$router.replace({ query: { page } });
			}

			this.$get('article/getArticleList', {
				page,
				pageSize
			}).then(res => {
				if (res.code === 200) {
					this.data = res.data.list;
					this.pager = res.data;
				} else {
					this.$msgError(res);
				}
			});
		}
	},
	beforeCreate() {
		//启用App.vue滚动条
		document.documentElement.setAttribute('auto-stream', '');
		this.$store.commit('set_needAppScrollbar', true);
	},
	beforeUnmount() {
		//关闭App.vue滚动条
		document.documentElement.removeAttribute('auto-stream');
		this.$store.commit('set_needAppScrollbar', false);
	},
	computed: {
		pathPage() {
			return this.$route.query.page || 1;
		}
	}
};
</script>

<style lang="scss">
#home {
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
}
</style>
